<template>
    <div class="login-box">
        <div class="login-box-right">
            <div class="login-form">
                <img src="@/assets/images/login/logo2.png" class="login-logo" />
                <div class="login-title">南通市经济开发区公安局通报平台</div>
                <div class="login-input">
                    <a-input placeholder="请输入账号" class="large-input" v-model:value="loginData.loginId">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="请输入手机号码" class="large-input" v-model:value="loginData.mobile">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input placeholder="请输入验证码" class="large-input" v-model:value="loginData.verifyCode">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-user.png" />
                        </template>
                        <template #suffix>
                            <a @click="getVerifyCode()">{{ text }}</a>
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input type="password" placeholder="请输入新密码" class="large-input" v-model:value="loginData.loginPw">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <div class="login-input">
                    <a-input type="password" placeholder="请再次输入新密码" class="large-input" v-model:value="loginData.againPw">
                        <template #prefix>
                            <img src="@/assets/images/login/icon-pwd.png" />
                        </template>
                    </a-input>
                </div>
                <div style="text-align:left;padding: 0 30px;">
                    <router-link to="/login" class="forget">立即登录</router-link>
                </div>
                <div>
                    <a-button type="primary" block class="login-btn" @click="updatePwd()">确认</a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import { Input, Button, message } from "ant-design-vue";
export default {
    components: {
        AInput: Input,
        AButton: Button,
    },
    data() {
        return {
            loginData: {
                loginId: "",
                mobile: "",
                verifyCode: "",
                loginPw: "",
                againPw: "",
            },
            text: "获取验证码",
            t: -1,
            timer: null,
            isClick: true,
        };
    },
    created() {},
    mounted() {},
    methods: {
        updatePwd() {
            if (!this.loginData.loginId) {
                message.warning("请填写登录账号");
                return;
            }
            if (!this.loginData.loginId) {
                message.warning("请填写手机号码");
                return;
            }
            if (!this.loginData.loginId) {
                message.warning("请填写短信验证码");
                return;
            }
            if (!this.loginData.loginPw) {
                message.warning("请填写新密码");
                return;
            }
            if (this.loginData.loginPw !== this.loginData.againPw) {
                message.warning("两次输入的密码不一致");
                return;
            }
            httpRequest.post("修改密码", { ...this.loginData }).then(() => {
                message.success("密码修改成功！");
            });
        },
        getVerifyCode() {
            if (this.t < 0) {
                if (!this.loginData.mobile || this.loginData.mobile == "0") {
                    message.warning("请填写手机号码");
                    return;
                }
                this.isClick = false;

                httpRequest
                    .post("发送验证码", { mobile: this.loginData.mobile, type: "Repw" })
                    .then(() => {
                        message.success("短信验证码发送成功！");
                        this.t = 60;
                        this.timer = setInterval(() => {
                            if (this.t > 0) {
                                this.t--;
                                this.text = this.t + "s后发送";
                            } else {
                                this.t--;
                                this.text = "获取验证码";
                                this.isClick = true;
                                clearInterval(this.timer);
                            }
                        }, 1000);
                    })
                    .catch(() => {
                        this.isClick = true;
                    });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.login-box {
    width: 100%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle, #102c51, #030b27);
    &-right {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 494px;
        background: #020b2e;
        border-radius: 13px;
        padding: 40px 50px;
        .login-logo {
            margin-bottom: 20px;
        }
        .login-form {
            display: block;
            .login-title {
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #e4e4e4;
            }
            .forget {
                float: right;
            }
            .remember {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .login-input {
                height: 40px;
                background: #b4b4b4;
                border-radius: 5px;
                margin: 20px;
                display: flex;
                .code-image {
                    width: 140px;
                    height: 40px;
                }
            }
        }
        .large-input {
            padding: 12px 11px;
        }
        .login-btn {
            width: 360px;
            height: 40px;
            line-height: 40px;
            padding: 0;
            border-radius: 8px;
            margin-top: 50px;
            margin-bottom: 15px;
            font-size: 20px;
        }
    }
}
</style>
